>

الزوار المتواجدون الان :

‏إظهار الرسائل ذات التسميات اضافات بلوجر. إظهار كافة الرسائل

إضافة صفحة الفيس بوك على البلوجر بتقنية jQuery

Unknown 0 التعليقات 3:56 ص

إضافة صفحة الفيس بوك على البلوجر بتقنية jQuery

السلام عليكم و رحمة الله
  أتيناكم اليوم بتقنية جميلة و هي نشر صفحة الفيس بوك على مدونتك و ظهورها بتقنية jQuery 
و هذا ما يساعدك كثيرا على نشر صفحتك على الفيس بوك


و إضافتها أمر سهل جدا ما عليك إلا التوجه إلى مدونتك
تضغط تخطيط ثم إضافة أداة و بعدها تنزل إلى html/ jva script
و بعدها تقوم بو ضع هذا الكود










<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'></script>









<script src="http://exeideasinternational.googlecode.com/files/jquery.colorbox-min.js"></script>









<script type="text/javascript">








jQuery(document).ready(function(){




if (document.cookie.indexOf('visited=true') == -1)



{



var fifteenDays = 1000*60*60*24*30;



var expires = new Date((new Date()).valueOf() + fifteenDays);



document.cookie = "visited=true;expires=" + expires.toUTCString();



$.colorbox({width:"400px", inline:true, href:"#exestylepopups"});



}



});



</script>



<style type="text/css">



/*



ColorBox v1.3.16



(Copyright (c) 2011 Jack Moore - jack@colorpowered.com)



*/



#colorbox,#cboxOverlay,#cboxWrapper{position:absolute;top:0;left:0;z-index:9999;overflow:hidden}#cboxOverlay{position:fixed;width:100%;height:100%}#cboxMiddleLeft,#cboxBottomLeft{clear:left}#cboxContent{position:relative}#cboxLoadedContent{overflow:auto}#cboxTitle{margin:0}#cboxLoadingOverlay,#cboxLoadingGraphic{position:absolute;top:0;left:0;width:100%}#cboxPrevious,#cboxNext,#cboxClose,#cboxSlideshow{cursor:pointer}.cboxPhoto{float:left;margin:auto;border:0;display:block}.cboxIframe{width:100%;height:100%;display:block;border:0}#cboxOverlay{background:#000;opacity:0.5 !important}#colorbox{box-shadow:0 0 15px rgba(0,0,0,0.4);-moz-box-shadow:0 0 15px rgba(0,0,0,0.4);-webkit-box-shadow:0 0 15px rgba(0,0,0,0.4)}#cboxTopLeft{width:14px;height:14px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhz20OfY5ZXeUmHcw9NuDuJny6djdXifeJmXsjuZ5SqSlufS9RH8SG81nLKfENnccqi2kCMHqXEEe2V8Sjb1bQdE0nRdPtJCVdd8CmlF7aUGdS7xrZObLPUNv5u6PkquzDlH2wPBWHCDWA/s1600/controls.png) no-repeat 0 0}#cboxTopCenter{height:14px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1JUFiQz2yP59IzVnoCawi62GJRXN9JKAfMxngyQiXu-8_XFZmu46F6XQ2c9TfogFgWeA3zfm_Ix2rErOl8v8uT22GUwfamBGicYBseDieMX0OjlfnWcQfdh45F0F0a_F7ARUjsWlDUtQ/s400/border.png) repeat-x top left}#cboxTopRight{width:14px;height:14px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhz20OfY5ZXeUmHcw9NuDuJny6djdXifeJmXsjuZ5SqSlufS9RH8SG81nLKfENnccqi2kCMHqXEEe2V8Sjb1bQdE0nRdPtJCVdd8CmlF7aUGdS7xrZObLPUNv5u6PkquzDlH2wPBWHCDWA/s1600/controls.png) no-repeat -36px 0}#cboxBottomLeft{width:14px;height:43px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhz20OfY5ZXeUmHcw9NuDuJny6djdXifeJmXsjuZ5SqSlufS9RH8SG81nLKfENnccqi2kCMHqXEEe2V8Sjb1bQdE0nRdPtJCVdd8CmlF7aUGdS7xrZObLPUNv5u6PkquzDlH2wPBWHCDWA/s1600/controls.png) no-repeat 0 -32px}#cboxBottomCenter{height:43px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1JUFiQz2yP59IzVnoCawi62GJRXN9JKAfMxngyQiXu-8_XFZmu46F6XQ2c9TfogFgWeA3zfm_Ix2rErOl8v8uT22GUwfamBGicYBseDieMX0OjlfnWcQfdh45F0F0a_F7ARUjsWlDUtQ/s400/border.png) repeat-x bottom left}#cboxBottomRight{width:14px;height:43px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhz20OfY5ZXeUmHcw9NuDuJny6djdXifeJmXsjuZ5SqSlufS9RH8SG81nLKfENnccqi2kCMHqXEEe2V8Sjb1bQdE0nRdPtJCVdd8CmlF7aUGdS7xrZObLPUNv5u6PkquzDlH2wPBWHCDWA/s1600/controls.png) no-repeat -36px -32px}#cboxMiddleLeft{width:14px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhz20OfY5ZXeUmHcw9NuDuJny6djdXifeJmXsjuZ5SqSlufS9RH8SG81nLKfENnccqi2kCMHqXEEe2V8Sjb1bQdE0nRdPtJCVdd8CmlF7aUGdS7xrZObLPUNv5u6PkquzDlH2wPBWHCDWA/s1600/controls.png) repeat-y -175px 0}#cboxMiddleRight{width:14px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhz20OfY5ZXeUmHcw9NuDuJny6djdXifeJmXsjuZ5SqSlufS9RH8SG81nLKfENnccqi2kCMHqXEEe2V8Sjb1bQdE0nRdPtJCVdd8CmlF7aUGdS7xrZObLPUNv5u6PkquzDlH2wPBWHCDWA/s1600/controls.png) repeat-y -211px 0}#cboxContent{background:#fff;overflow:visible}#cboxLoadedContent{margin-bottom:5px}#cboxLoadingOverlay{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1SAiBF7Oz7nW09WNstIjVia0k5l4qjIHLOVLtdaUBGLzJgXeqaNynXnpgvqybA1zwwzfILAdndaUcO-ahf3xIXZwOXryfFnHePS4OmNdfrMVAxm636RAkUorWXlBkjiu26NF050nAGvY/s400/loadingbackground.png) no-repeat center center}#cboxLoadingGraphic{https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYKffN-F2m-fmVED4FVYM3WwPZ-GKzk1Zus8RKwNyZGFig2QF6buXWqXj4uLauSOXM5MN7LcC4txdMCWSCiNnv745EmEnbUXYdnteBvdFM5CUkgRzFWjyfzEqeDaR7HCOdJYDfKWEnAcM/s400/loading.gif) no-repeat center center}#cboxTitle{position:absolute;bottom:-25px;left:0;text-align:center;width:100%;font-weight:bold;color:#7C7C7C}#cboxCurrent{position:absolute;bottom:-25px;left:58px;font-weight:bold;color:#7C7C7C}#cboxPrevious,#cboxNext,#cboxClose,#cboxSlideshow{position:absolute;bottom:-29px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhz20OfY5ZXeUmHcw9NuDuJny6djdXifeJmXsjuZ5SqSlufS9RH8SG81nLKfENnccqi2kCMHqXEEe2V8Sjb1bQdE0nRdPtJCVdd8CmlF7aUGdS7xrZObLPUNv5u6PkquzDlH2wPBWHCDWA/s1600/controls.png) no-repeat 0px 0px;width:23px;height:23px;text-indent:-9999px}#cboxPrevious{left:0px;background-position:-51px -25px}#cboxPrevious.hover{background-position:-51px 0px}#cboxNext{left:27px;background-position:-75px -25px}#cboxNext.hover{background-position:-75px 0px}#cboxClose{right:0;background-position:-100px -25px}#cboxClose.hover{background-position:-100px 0px}.cboxSlideshow_on #cboxSlideshow{background-position:-125px 0px;right:27px}.cboxSlideshow_on #cboxSlideshow.hover{background-position:-150px 0px}.cboxSlideshow_off #cboxSlideshow{background-position:-150px -25px;right:27px}.cboxSlideshow_off #cboxSlideshow.hover{background-position:-125px 0px}#mdfb{font:12px/1.2 Arial,Helvetica,san-serif;color:#666}#mdfb a,#mdfb a:hover,#mdfb a:visited{text-decoration:none}.mdbox-title{background:#000;color:#fff;font-size:20px !important;font-weight:bold;margin:10px 0;border:20px solid #ddd;-moz-border-radius:6px;-webkit-border-radius:6px;border-radius:6px;box-shadow:5px 5px 5px #CCC;padding:10px;line-height:25px;font-family:arial !important}



</style>



<div style='display:none'>



<div id='exestylepopups' style='padding:10px; background:#fff;'>



<center><h3 class="mdbox-title">Receive all updates via Facebook. Just Click the Like Button Below...</h3></center><center>



<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fahmed.nassar.23&amp;width=300&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23ffffff&amp;stream=false&amp;header=false&amp;height=258" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:300px; height:258px;" allowtransparency="true"></iframe>



</center><p style=" float:right; margin-right:35px; font-size:9px;" >Powered By <a style=" font-size:9px; color:#3B78CD; text-decoration:none;" href="http://www.4we-eb.blogspot.com">4we-eb</a></p>



</div></div>



لا تنسى تغيير رابط صفحتي الذي باللون الأحمر و ليس الرابط كليا مثلا
www.facebook.com/ahmed.nassar.23  الذي ب اللون الأحمر فقط 
ثم إضغط حفظ و مبروك
تابع القراءة

تعديل كاتب الموضوع فى بلوجر من محترف البرامج

Unknown 0 التعليقات 9:31 ص
تعديل كاتب الموضوع فى بلوجر من محترف البرامج
 اتركم مع الشرح لاتنسو التقيمم للفديو 
تابع القراءة

إضافة تواصل معنا عبر إيميلك مباشرة

Unknown 0 التعليقات 11:57 ص

إضافة تواصل معنا عبر إيميلك مباشرة


سلام الله عليكم أحبابي في الله 
أرجو أن تكونوا بصحة جيدة 
كالعادة مدونة نورو للمعلوماتية تأيك بإضافة جميلة و جديدة 
أنا وهي التواصل مباشرة عبر بريدك


و طريقة الإضافة عادية جدا 
إضافة أداة ثم أدخل هذا الكود


<style type='text/css'>#sidebar-subscribe-box{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhck7zuY5ajL-dcDA7iZsuigINxgEgALu6UhJit7G1abXB7hEoQEAimEoCDKOHJh7-GYyuxdCdtN7XQxewwzPto6-O68Nd5SJU5RKKelXb9pFsWYABkRg8v89DsV23wJkHq4fy03AIIoutC/s1600/colored-strip.png) repeat scroll 0 0 transparent;border:1px solid #aaa;border-radius:3px;padding:3px 0}.sidebar-subscribe-box-wrapper{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgC5_1UbU86ty8MNse-MDkcY0j4M7kThCAxsPRSwAGJPTIY8bNNMMmnfSQ05nTFGZNVycrS8mhbXup2mLTvWn9hNQMpPD8LChgDaSWl8N_ms0Ju-vHIS9c1OQq-eQv1md8BXOn9wKWDCbpk/s1600/bg-pattern.png) repeat scroll 0 0 #f7f7f7;color:#111;font-size:14px;line-height:20px;padding:1px 20px 10px;text-align:center;text-transform:uppercase}.sidebar-subscribe-box-form{clear:both;display:block;margin:10px 0}form.sidebar-subscribe-box-form{clear:both;display:block;margin:10px 0 0;width:auto}.sidebar-subscribe-box-email-field{-moz-border-radius:4px;-webkit-border-radius:4px;background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmj2e0FR2LCuU4FnT4Hl1HG2PG2-T9ij3WTAnlF-ex2kRGV50xkPsNAttwtnPPrP6K8Bzl722jszUdovcmtPMcITuZMS0bdBLEjKmcTjY6yC4PSHG1Ml6igA9XjQ4B4cLGUmAyPpWNQsA6/s1600/sprites.png) no-repeat 0 -27px;border:1px solid #ccc;border-radius:4px;color:#444;margin:0 0 15px;padding:10px 40px;width:68%}.sidebar-subscribe-box-email-button{background:#09f;border:1px solid #007fff;box-shadow:0 1px 0 rgba(255,255,255,0.3) inset, 0 1px 0 transparent;color:#fff;cursor:pointer;font-family:verdana;font-weight:700;padding:10px;text-shadow:1px 1px 0 rgba(0,0,0,.4);text-transform:uppercase;width:100%}.sidebar-subscribe-box-email-button:hover,.sidebar-subscribe-box-email-button:focus{background:#1ca4ff}.sidebar-subscribe-box-email-button:active{-moz-box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;-webkit-box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;outline:0}iframe,object,embed,.yt-border iframe,.yt-border object,.yt-border embed,table{width:100%}embed{border-radius:3px;-moz-box-shadow:0 2px 4px rgba(0,0,0,0.2);-webkit-box-shadow:0 2px 4px rgba(0,0,0,0.2);background:#FFF;border:1px solid #ddd;box-shadow:0 2px 4px rgba(0,0,0,0.2);margin:0;padding:4px 4px 4px}#footer-section{background:#f5f5f5 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbNHgEaGP9gUL1oRG4S-DX571IxkxQ95y-mqN5VOja-5ysLQc2TxWW__awgljgGK77ED4-R4JV934riQS4sxws8M_xbzTvQbzxCpTQe_fTUXKzMjK6dPybdMne9XBlTTfToVVXvJHGjdlX/s0/bg-pattern.png) repeat top left;border-top:1px solid #aaa;box-shadow:inset 0 4px 6px -3px #aaa;font-family:cambria;font-size:14px;height:100px;margin:10px -30px 5px;padding:0 30px;text-align:center;width:100%}</style>
    <div id="sidebar-subscribe-box">
<div class="sidebar-subscribe-box-wrapper">
<p>
سجل بريدك الإلكتروني لتتوصل بآخر المواضيع مباشرة على بريدك</p>
<div class="sidebar-subscribe-box-form">
<form action="http://feedburner.google.com/fb/a/mailverify?uri=norojhony" class="sidebar-subscribe-box-form" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=norojhony', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input name="uri" type="hidden" value="norojhony" /><input name="loc" type="hidden" value="en_US" /><input class="sidebar-subscribe-box-email-field" name="email" autocomplete="off" placeholder="ضع بريدك الإلكتروني هنا :)"/><input class="sidebar-subscribe-box-email-button" title="" type="submit" value="! تسجل الآن" /></form>
</div>
</div>
</div>



ثم غير ما مكتوب باللون الأحمر بإسمك الخاص على feedburner
ثم إضغط حفظ و مبروك عليك الإضافة
تابع القراءة

إضافة كاتب الموضوع بطريقة جميلة

Unknown 0 التعليقات 11:53 ص

إضافة كاتب الموضوع بطريقة جميلة للبلوجر


 سلام الله عليكم أحبابي في الله أتمنّى أن تكونوا بصحة جيّدة إن شاء الله 
فى تدوينة اليوم نتعلم كيفية اضافة كاتب الموضوع الى بلوجر 

و هي طريقية مثالية و خاصة في المدونة الذي يجد بها العديد من المدونين 
كيفية إضافة هذه الطريقة ما عليك إلا التوجه إلى القالب ثم تحرير HTML و بعدها تنسيق
و بعد ذلك تضع هذا الكود 

]]></b:skin>

و فوقه مباشرة ضع هذا الكود


**تفعيل الإضافة للمدونات الفردية**

لو كانت مدونتك شخصية ماعليك إلا تركيب الكود التالي تحت أو فوق أحد هذين الكودين
<div class='post-footer'>
أو
<div class='post-footer-line post-footer-line-1'>
و قم بتغيير الروابط الخاصة بك أخي العزيز


و قم بمراعاة الأكواد أو لن تنجح الطريقة 
و في الأخير السلام عليكم 

**لا  تنسوا تقييم الشرح**
تابع القراءة

إضافة أزرار المشاركة بشكل متميّز

Unknown 0 التعليقات 11:43 ص

إضافة أزرار المشاركة بشكل متميّز 


 سلام الله عليكم أحبابي في الله أتمنى أن تكونوا بصحة جيّدة 
في هذه التدوينة الجميلة أتيتكم بإضافة متميّزة
أنا وهي إضافة أزرار الإشتراك على شكل وندوز 8 و هي إضافة جميلة و مريحة بألوانها 


و لإضافة هذا الكود نذهب إلى القالب ثم تحرير HTML 
ثم نبحث على كلمة 

]]></b:skin>

بعد أن تجده ضع فوقه مباشرة هذا الكود


 ثم قم بحفظ القالب و إتجه إلى تحرير ثم إضافة أداة و قم يوضع هذا الكود


 
و قم بالتعديل على أسمائك في كل إضافة و مبروك عليك الإضافة 

***لا تنسوا تقييم الشرح***
أستودعكم في الله و السلام عليكم 

 
تابع القراءة

اضافة الزر google+1

Unknown 0 التعليقات 6:44 ص

  اضافة الزر google+1 

بسم الله و الحمد لله و الصلاة و السلام على رسول الله.
السلام عليكم و رحمة الله.
لعلكم لاحظتم أثناء تصفحكم ظهور زر جديد يحمل 1+ في مواقع و مدونات كثيرة. هذا الزر الجديد المقدم من جوجل يتيح لك فرصة تزكية المواضيع التي أعجبتك، و نتيجة لهذه التزكية سيتعرف أصدقاءك على المواضيع التي أعجبت بها في نتائج بحث جوجل حيث سيشار فيها إلى أنك قد أضفت 1+ لهذا الموضوع. 
والان طريقة تركيب الزر


  • و لمن يريد وضع زر 1+ المقدم من جوجل في مكان معين فالطريقة هي كالآتي.
 أولا : من لوح تحكم مدونتك توجه إلى صفحة تحرير HTML و قبل البدء في أي تعديل احفظ نسخة احتياطية من قالب مدونتك على جهازك ثم ضع علامة على خانة توسيع القوالب.

ثانيا : ابحث عن </head> ثم فوقعه مباشرة ضع الكود الآتي.
<script type="text/javascript" src="http://apis.google.com/js/plusone.js">
{lang: 'en-US'}
</script>
 
 
يمكنك استبدال en-US  ب ar  لتغير لغة الزر إلى العربية، و أشير هنا أن الزر لا زال لا يدعم العربية بشكل جيد.
ثالثا : ابحث عن  <data:post.body/>  و قبله مباشرة ألصق الكود الآتي إن أحببت أن يظهر الزر فوق جسم التدوينة مباشرة تحت العنوان. أما إن أردت أن يكون الزر تحت التدوينة فألصق الكود الآتي بعده.
<div style='float:left'>
<g:plusone size="tall" expr:href="data:post.url"/>
</div>
  
وبكدة نكون خلصنا اضافة الزر
المصدر : مدونة محترف البرامج

 
تابع القراءة

إضافة أداة المتابعة عبر الشبكات الإجتماعية (مدونات بلوجر)

Unknown 0 التعليقات 6:43 ص
إضافة أداة المتابعة عبر الشبكات الإجتماعية (شكل رائع)

  • اذهب إلى لوحة التحكم الخاصة بمدونتك ثم التخطيط بعد ذلك اضغط على إضافة أداة HTML/Javascript
  • الآن انسخ الكود التالي و ضعه داخل الأداة :


      .btn-sbm:active .btn-sbm-action:after {
      bottom: 3px;
    }
    .btn-sbm-count {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      line-height: 40px;
      font-size: 20px;
      letter-spacing: -1px;
      color: #555;
      text-shadow: 0 1px white;
      background: #e6eff5;
      border-width: 1px 1px 0;
      border-style: solid;
      border-color: #c5c5c5 #bbb;
      border-radius: 8px 8px 0 0;
      background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.03) 0%, transparent 40%);
      background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.03) 0%, transparent 40%);
      background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.03) 0%, transparent 40%);
      background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.03) 0%, transparent 40%);
      -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 1px rgba(0, 0, 0, 0.18), 0 2px rgba(0, 0, 0, 0.07);
      box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 1px rgba(0, 0, 0, 0.18), 0 2px rgba(0, 0, 0, 0.07);
    }
    .btn-sbm-count:before, .btn-sbm-count:after {
      content: '';
      position: absolute;
      top: 100%;
      left: 50%;
      margin-left: -6px;
      border: 6px solid transparent;
      border-top-color: #e6eff5;
    }
    .btn-sbm-count:before {
      margin-left: -7px;
      margin-top: 1px;
      border-width: 7px;
      border-top-color: rgba(0, 0, 0, 0.07);
    }
    .btn-sbm-action {
      display: block;
      position: relative;
      line-height: 32px;
      padding: 2px 0 6px;
      font-size: 18px;
      color: white;
      text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
      border: solid rgba(0, 0, 0, 0.18);
      border-width: 0 1px;
      border-radius: 0 0 8px 8px;
    }
    .btn-sbm-action:after {
      content: '';
      position: absolute;
      top: 0;
      bottom: 6px;
      left: 0;
      right: 0;
      border-radius: 0 0 6px 6px;
      -webkit-box-shadow: inset 0 -1px 2px rgba(255, 255, 255, 0.25);
      box-shadow: inset 0 -1px 2px rgba(255, 255, 255, 0.25);
    }
    .btn-sbm-tweet {
      background: #83cfe8;
      background-image: -webkit-linear-gradient(top, #83cfe8, #6ebbd4);
      background-image: -moz-linear-gradient(top, #83cfe8, #6ebbd4);
      background-image: -o-linear-gradient(top, #83cfe8, #6ebbd4);
      background-image: linear-gradient(to bottom, #83cfe8, #6ebbd4);
      -webkit-box-shadow: inset 0 -6px rgba(0, 0, 0, 0.16), inset 0 -1px rgba(0, 0, 0, 0.15);
      box-shadow: inset 0 -6px rgba(0, 0, 0, 0.16), inset 0 -1px rgba(0, 0, 0, 0.15);
    }
    .btn-sbm-tweet:after {
      -webkit-box-shadow: inset 0 -1px 2px rgba(255, 255, 255, 0.5);
      box-shadow: inset 0 -1px 2px rgba(255, 255, 255, 0.5);
    }
    .btn-sbm-tweet + .btn-sbm-count {
      -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 1px rgba(0, 0, 0, 0.12), 0 2px rgba(0, 0, 0, 0.04);
      box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 1px rgba(0, 0, 0, 0.12), 0 2px rgba(0, 0, 0, 0.04);
    }
    .btn-sbm-like {
      background: #6480bd;
      background-image: -webkit-linear-gradient(top, #6480bd, #3c5894);
      background-image: -moz-linear-gradient(top, #6480bd, #3c5894);
      background-image: -o-linear-gradient(top, #6480bd, #3c5894);
      background-image: linear-gradient(to bottom, #6480bd, #3c5894);
      -webkit-box-shadow: inset 0 -6px rgba(0, 0, 0, 0.15), inset 0 -1px rgba(0, 0, 0, 0.2);
      box-shadow: inset 0 -6px rgba(0, 0, 0, 0.15), inset 0 -1px rgba(0, 0, 0, 0.2);
    }
    .btn-sbm-plus {
      background: #626262;
      background-image: -webkit-linear-gradient(top, #626262, #404040);
      background-image: -moz-linear-gradient(top, #626262, #404040);
      background-image: -o-linear-gradient(top, #626262, #404040);
      background-image: linear-gradient(to bottom, #626262, #404040);
      -webkit-box-shadow: inset 0 -6px rgba(0, 0, 0, 0.08), inset 0 -1px rgba(0, 0, 0, 0.3);
      box-shadow: inset 0 -6px rgba(0, 0, 0, 0.08), inset 0 -1px rgba(0, 0, 0, 0.3);
    }
    </style>
    <br/>
    <div class="container">
         <a href=https://twitter.com/Username rel="nofollow" target="_blank"rel="author"  title="تابعنا عبر التويتر" class="btn-sbm">
          <span class="btn-sbm-action btn-sbm-tweet">تويتر</span>
          <span class="btn-sbm-count">150+</span>
        </a>
        <a href=http://www.facebook.com/modawanatmohamed rel="nofollow" target="_blank" title="صفحتنا على الفايسبوك" class="btn-sbm">
          <span class="btn-sbm-action btn-sbm-like">فايسبوك</span>
          <span class="btn-sbm-count">650+</span>
        </a>
        <a href="Google Plus" class="btn-sbm" target="_blank" rel="author" title="تابعنا على جوجل+">
          <span class="btn-sbm-action btn-sbm-plus">جوجل+</span>
          <span class="btn-sbm-count">140+</span>
        </a><br/>
    </div>
    .
    .
    التعديل على الكود :
    • 270px : غيره إذا أردت تغيير حجم الأداة.
    • Username : غيره باسم المستخد الخاص بك على التويتر.
    • +150 : استبدله بعدد المتابعين لديك على التويتر.
    • modawanatmohamed : غيره باسم صفحتك على الفايسبوك.
    • +650 : استبدله بعدد المتابعين لديك على الفاسبوك.
    • Google Plus : غيره برابط صفحتك على جوجل+.
    • +140 : استبدله بعدد المتابعين لديك على جوجل+. 

    .
    وبكدة نكون اضفنا الاداة داخل المدونة .... المصدر : مدونة محترف البرامج
تابع القراءة
الاشتراك في: الرسائل (Atom)

التبادل الاعلانى

جميع الحقوق محفوظة محترف البرامج            تعريب مدونة البلوقر